<template>
  <Form
  class="c-table-form bg-white mb-4"
  ref="formRef"
  layout="inline"
  :model="formData"
  >
    <FormItem label="状态" name="status" >
      <Select v-model:value="formData.status" placeholder="请选择房间状态">
        <SelectOption 
        v-for="item in roomStatusOptions" 
        :value="item.value" 
        :key="item.value"> {{ item.label }} </SelectOption>
      </Select>
    </FormItem>
    <FormItem label="类型" name="type" >
      <Select v-model:value="formData.type" placeholder="请选择房间类型">
        <SelectOption 
        v-for="item in props.roomTypeOpts" 
        :value="item.value" 
        :key="item.value" >{{ item.label }}</SelectOption>
      </Select>
    </FormItem>
    <FormItem>
      <Button class="mr-2" type="primary" @click="onReset">重置</Button>
      <Button type="primary" :icon="h(SearchOutlined)" @click="onSearch">搜索</Button>
    </FormItem>
  </Form>
</template>

<script lang="ts" setup>
import { reactive, ref, h, defineEmits } from 'vue'
import { SearchOutlined } from '@ant-design/icons-vue'
import { Form, FormItem, Select, SelectOption, Button } from 'ant-design-vue'
import { roomStatusOptions } from './settings'
import { IDictionaryOpts } from '@/api/dictionary/model';

const emit = defineEmits(['confirm', 'reset'])

const props = defineProps<{
  roomTypeOpts?: IDictionaryOpts[]
}>()

const formData = reactive({
  type: '',
  status: ''
})

const formRef = ref();

function onSearch() {
  const data = formRef.value.getFieldsValue();
  emit('confirm', data);
}

function onReset() {
  formRef.value.resetFields();
  emit('reset', formRef.value.getFieldsValue())
}

</script>

<style lang="less" scoped >
.c-table-form {
  padding: 20px 10px;
  border-radius: 6px;
}

::v-deep(.ant-form-item) {
  flex: 1;
}
</style>